import type { VNode } from 'vue'
import type { InputTextareaPropsType } from './typings'
import { defineComponent, getCurrentInstance } from 'vue'
import { ElInput } from 'element-plus'
import styles from './index.module.scss'

const InputTextarea: (props: InputTextareaPropsType) => VNode = defineComponent({
  name: 'InputTextarea',
  props: ['placeholderName', 'inputTextareaValue', 'limitLength'],
  emits: ['update:inputTextareaValue'],
  setup(props: InputTextareaPropsType, { emit }) {
    const { ctx: that }: any = getCurrentInstance()
    const handleOnInput = (value: string) => {
      const { limitLength = 0 } = props
      if (value.length > limitLength) {
        // inputTextareaValue = inputTextareaValue.slice(0, limitLength)
        emit('update:inputTextareaValue', value.slice(0, limitLength))
        return
      }
      emit('update:inputTextareaValue', value)
      that.$forceUpdate() // 处理无法输入
    }

    return () => {
      const { placeholderName = '', inputTextareaValue = '', limitLength = 0 } = props
      return (
        <>
          <ElInput
            class={styles['inputTextarea-elInput']}
            type="textarea"
            onInput={handleOnInput}
            // v-model={inputTextareaValue}
            modelValue={inputTextareaValue}
            placeholder={placeholderName}
            clearable
            // maxlength={limitLength}
            showWordLimit
            {...{ maxlength: limitLength }}
          />
          {/* <span class={styles['inputTextarea-showLimit']}>
            {inputTextareaValue?.length ?? 0}/{limitLength}
          </span> */}
        </>
      )
    }
  }
}) as any

export default InputTextarea
